<template>
  <div
    class="unit-exbit-null-remarks-info"
    @mouseup="endDrag()"
    :style="{
      display: flag ? 'none' : 'flex',
    }"
  >
    <div
      class="solid-box"
      ref="track"
      @mousedown="startDrag($event)"
      @mousemove="draggings($event)"
      @mouseup="endDrag()"
    >
      <div class="solid-border" :class="'solid-border' + store.styleInfo.colorType"></div>
      <div
        :style="{ top: knobPosition + 'px' }"
        ref="knob"
        class="templatestyle1-scroll-box-tumb"
        :class="'templatestyle1-scroll-box' + store.styleInfo.colorType"
      >
        <div>
          <i
            v-if="store.styleInfo.styleType == 1"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe602;
          </i>
          <i
            v-if="store.styleInfo.styleType == 2"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe60d;
          </i>
          <i
            v-if="store.styleInfo.styleType == 3"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe613;
          </i>
          <i
            v-if="store.styleInfo.styleType == 4"
            class="iconfonts"
            :style="{
              fontFamily: store.styleInfo.fontFamily,
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe603;
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { useProjectStore } from '@/store';
const store = useProjectStore();
const isScrollType = ref(true);
const track = ref(null); // 拖动轨道
const knob = ref(null); // 拖动手柄
const knobPosition = ref(0); // 手柄位置
const dragging = ref(false); // 是否拖动中
const per = ref(0);
const flag = ref(true);
const props = defineProps({
  remarks: {
    type: String,
  },
  showBtn: {
    type: Boolean,
  },
  id: Number,
});
const startDrag = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  dragging.value = true;
  let arrs = event.clientY - track.value.getBoundingClientRect().top;
  if (arrs > 262) {
    knobPosition.value = arrs - 20;
  } else {
    knobPosition.value = arrs;
  }
  var container = document.getElementById(`subunit_scorrl${props.id}`); // 滚动容器
  var scrollPercent = knobPosition.value / 262; // 需要滚动到的百分比
  var scrollHeight = container.scrollHeight; //总滚动高度
  var clientHeight = container.clientHeight; //滚动容器高度
  container.scrollTop = (scrollHeight - clientHeight) * scrollPercent; //设置滚动位置
};

// 拖动时更新手柄位置
const draggings = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  if (!dragging.value) return;
  const trackTop = track.value.getBoundingClientRect().top;
  // console.log(trackTop);
  const trackHeight = 262;

  const y = event.clientY - trackTop;
  let arrs = Math.min(trackHeight, Math.max(0, y));
  if (arrs > 262) {
    knobPosition.value = arrs - 20;
  } else {
    knobPosition.value = arrs;
  }
  //   let scrollB=knobPosition.value/262
  var container = document.getElementById(`subunit_scorrl${props.id}`); // 滚动容器
  var scrollPercent = knobPosition.value / 262; // 需要滚动到的百分比
  var scrollHeight = container.scrollHeight; //总滚动高度
  var clientHeight = container.clientHeight; //滚动容器高度
  container.scrollTop = (scrollHeight - clientHeight) * scrollPercent; //设置滚动位置
};

// 结束拖动时更新状态
const endDrag = () => {
  dragging.value = false;
};
const isScrollBox = (element: any) => {
  return element.scrollHeight > element.clientHeight;
};
const initScroll = () => {
  var container = document.getElementById(`subunit_scorrl${props.id}`); // 滚动容器
  if (isScrollBox(container)) {
    isScrollType.value = true;
    console.log('滚动盒子开启滚动');
  } else {
    isScrollType.value = false;
    console.log('滚动盒子开启禁止滚动');
  }
};
const initScrollBox = () => {
  // if (!isScrollType.value) {
  //   return;
  // }
  var container = document.getElementById(`subunit_scorrl${props.id}`); // 滚动容器
  console.log('container', container);

  container.addEventListener('scroll', function () {
    console.log('111', knobPosition.value);
    var scrollTop = container.scrollTop;
    var scrollHeight = container.scrollHeight;
    var height = container.clientHeight;
    var scrolled = (scrollTop / (scrollHeight - height)) * 100;
    knobPosition.value = (262 * scrolled) / 100;
    if (knobPosition.value > 262 - 20) {
      knobPosition.value = 262 - 20;
    } else {
      knobPosition.value = knobPosition.value;
    }
  });
};
const getDom = () => {
  const container = document.getElementById(`tem11_subunit_scorrl${props.id}`);
  console.log(container?.clientHeight);

  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;
  const lineHeight = parseInt(getComputedStyle(container).getPropertyValue('line-height'));

  const contentWidth = container.scrollWidth;
  const contentHeight = container.scrollHeight;
  console.log('contentHeight', contentHeight, lineHeight);

  const lineCount = Math.round(contentHeight / lineHeight);
  const isContentOverflow = contentWidth > containerWidth || contentHeight > containerHeight;

  flag.value = !(lineCount > 8);
  console.log('行数', lineCount);
};
onMounted(() => {
  initScroll();
  initScrollBox();
  getDom();
});
watch(
  () => props.showBtn,
  (newValue) => {
    console.log('newValue', newValue);

    flag.value = newValue;
    knobPosition.value = 0;
    nextTick(() => {
      initScroll();
      initScrollBox();
      getDom();
    });
  },
  { deep: true, immediate: true },
);
</script>

<style scoped lang="less">
// .unit-exbit-null-remarks-info {
//   display: flex;

//   min-height: 240px;
//   position: relative;
//   .unit-exbit-null-remarks-info-remarks {
//     flex: 1;
//     min-height: 240px;
//     // overflow-y: auto;
//     span {
//       text-indent: 2em;
//       font-size: 17px;
//       font-weight: 500;
//       color: #333333;
//       line-height: 30px;
//       // margin-bottom: 24px;
//     }
//   }
// }
.solid-box {
  position: relative;
  width: 20px;
  height: 100%;
}
.unit-exbit-null-remarks-info-remarks::-webkit-scrollbar {
  display: none;
}
.templatestyle1-scroll-box-tumb {
  position: absolute;
  position: relative;
  z-index: 60;
}

.solid-border {
  position: absolute;
  top: 0;
  left: 8px;
  height: 100%;
  width: 2px;
  border-radius: 5px;
  opacity: 0.3;
}
.solid-border1 {
  background: #cfbda8;
}
.solid-border2 {
  background: #8f9ebf;
}
.solid-border3 {
  background: #b9463f;
}
.solid-border4 {
  background: #343029;
}
.solid-border5 {
  background: #171719;
}
</style>
